<template>
    <div>
        <lbt></lbt>
        <!--人气美食-->
        <div class="container yummy-foods">
            <h2 class="big-title hidden-xs hidden-sm">
                <a href="javascript:;"></a>
            </h2>
            <h2 class="small-title hidden-lg hidden-md">
                <a href="javascript:;"></a>
            </h2>
            <div class="row img-box">
                <div class="col-xs-12 col-md-3 col-sm-6">
                    <a href="javascript:;" class="thumbnail ma">
                        <!--<img src="../assets/images/chanpin/ma.png">-->
                    </a>
                </div>
                <div class="col-xs-12 col-md-3 col-sm-6">
                    <a href="#" class="thumbnail la">
                        <!--<img src="../assets/images/chanpin/la.png" alt="..." class="la">-->
                    </a>
                </div>
                <div class="col-xs-12 col-md-3 col-sm-6">
                    <a href="#" class="thumbnail xian">
                        <!--<img src="../assets/images/chanpin/xian.png" alt="..." class="xian">-->
                    </a>
                </div>
                <div class="col-xs-12 col-md-3 col-sm-6">
                    <a href="#" class="thumbnail xiang">
                        <!--<img src="../assets/images/chanpin/xiang.png" alt="..." class="xiang">-->
                    </a>
                </div>
            </div>
        </div>

        <!--爆款单品-->
        <div class="container hot-foods">'
            <h2 class="big-title hidden-xs hidden-sm">
                <a href="javascript:;"></a>
            </h2>
            <h2 class="small-title hidden-lg hidden-md">
                <a href="javascript:;"></a>
            </h2>
            <div class="row img-box">
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/feiniu.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/gaoshanwawacai.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/youdoufu.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/yigende.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/gurouxianglian.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/zhenxuanniuliu.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/shengcai.png">
                    </a>
                </div>
                <div class="col-xs-6 col-md-3">
                    <a href="javascript:;" class="thumbnail ma">
                        <img src="../../assets/images/chanpin/youzhijinzhengu.png">
                    </a>
                </div>
            </div>
        </div>

        <commonFooter></commonFooter>

    </div>
</template>

<script>
    import lbt from "@/components/lbt/biglbt"
    import commonFooter from "@/components/footerCom/commonFooter"

    export default {
        data() {
            return {}
        },
        methods: {},
        created() {

        },
        components: {
            lbt,
            commonFooter
        }

    }
</script>

<style lang="less">
    /*人气美食*/
    .yummy-foods {
        margin-top: 20px;
        /*background-color: pink;*/

        h2 {
            text-align: center;
            height: 129px;
            margin-bottom: 40px;

            a {
                width: 100%;
                height: 100%;
                display: block;
            }

            &.big-title {
                a {
                    background: url("../../assets/images/chanpin/yummy_goods_title.png") no-repeat center center;
                }
            }

            &.small-title {
                a {
                    background: url("../../assets/images/chanpin/yummy--foods-title-small.png") no-repeat center center;
                }
            }
        }

        > .img-box {
            height: 400px;
            margin-bottom: 20px;

            > div {
                height: 100%;
                margin-bottom: 20px;

                .thumbnail {
                    display: block;
                    height: 400px;
                    border-color: transparent;
                    transition: background 0.5s;

                    &.ma {
                        background-image: url("../../assets/images/chanpin/ma.png");
                        background-repeat: no-repeat;
                        background-size: cover;

                        &:hover {
                            background-image: url("../../assets/images/chanpin/ma_hover.png");
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                    }

                    &.la {
                        background-image: url("../../assets/images/chanpin/la.png");
                        background-repeat: no-repeat;
                        background-size: cover;

                        &:hover {
                            background-image: url("../../assets/images/chanpin/la_hover.png");
                            background-repeat: no-repeat;
                            background-size: cover;
                        }

                    }

                    &.xian {
                        background-image: url("../../assets/images/chanpin/xian.png");
                        background-repeat: no-repeat;
                        background-size: cover;

                        &:hover {
                            background-image: url("../../assets/images/chanpin/xian_hover.png");
                            background-repeat: no-repeat;
                            background-size: cover;
                        }

                    }

                    &.xiang {
                        background-image: url("../../assets/images/chanpin/xiang.png");
                        background-repeat: no-repeat;
                        background-size: cover;

                        &:hover {
                            background-image: url("../../assets/images/chanpin/xiang_hover.png");
                            background-repeat: no-repeat;
                            background-size: cover;
                        }

                    }
                }
            }
        }

        /*.imgbox {*/
        /*!*margin-top: 30px;*!*/
        /*!*padding-left: 20px;*!*/
        /*!*padding-right: 20px;*!*/
        /*!*margin-bottom: 20px;*!*/

        /*div {*/
        /*width: 279px;*/
        /*height: 414px;*/
        /*padding: 0;*/
        /*}*/

        /*.thumbnail {*/
        /*border: 0;*/
        /*width: 280px;*/
        /*height: 414px;*/
        /*padding: 0;*/
        /*margin-bottom: 0;*/
        /*transition: background-image 0.5s;*/
        /*}*/
        /*.ma {*/
        /*background-image: url("../assets/images/chanpin/ma.png");*/

        /*&:hover {*/
        /*background-image: url("../assets/images/chanpin/ma_hover.png");*/
        /*}*/
        /*}*/

        /*.la {*/
        /*background-image: url("../assets/images/chanpin/la.png");*/
        /*&:hover {*/
        /*background-image: url("../assets/images/chanpin/la_hover.png");*/
        /*}*/
        /*}*/

        /*.xian {*/
        /*background-image: url("../assets/images/chanpin/xian.png");*/
        /*&:hover {*/
        /*background-image: url("../assets/images/chanpin/xian_hover.png");*/
        /*}*/
        /*}*/

        /*.xiang {*/
        /*background-image: url("../assets/images/chanpin/xiang.png");*/
        /*&:hover {*/
        /*background-image: url("../assets/images/chanpin/xiang_hover.png");*/
        /*}*/
        /*}*/
        /*}*/
    }

    /*爆款单品*/
    @media (min-width: 992px) {
        .hot-foods {
            margin-bottom: 180px;
        }
    }

    @media (max-width: 768px) {
        .hot-foods {
            margin-bottom: 0;
        }
    }

    .hot-foods {
        h2 {
            text-align: center;
            height: 129px;
            margin-bottom: 40px;

            a {
                width: 100%;
                height: 100%;
                display: block;
            }

            &.big-title {
                a {
                    background: url("../../assets/images/chanpin/hot_foods_title.png") no-repeat center center;
                }
            }

            &.small-title {
                a {
                    background: url("../../assets/images/chanpin/hot_foods_title_small.png") no-repeat center center;
                }
            }
        }

        .row {
            div {
                /*padding: 0;*/

                a {
                    background-color: transparent;
                    border-color: transparent;
                    overflow: hidden;

                    img {
                        border-radius: 10px;

                        &:hover {
                            transform: scale(1.01);
                        }
                    }
                }
            }
        }
    }
</style>
